<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22 衡水车务站 - mbtiles</title>
    <!--    <script src="../lib/ol4/ol4.js"></script>-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <script src="../lib/proj4/proj4.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mapbox-gl@2.0.0/dist/mapbox-gl.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>
	const projection = ol.proj.get('EPSG:3857');
	const tileSize = 256;
	const projectionExtent = projection.getExtent();
	console.log(projectionExtent);
	const origins = [
		[-180.0, 90.0],
		ol.extent.getTopLeft(projectionExtent)
	];
	const origin = origins[1];

	const size = ol.extent.getWidth(projectionExtent) / tileSize;

	const resolutions = new Array(18);
	const matrixIds = [];
	for (let z = 1; z < 19; z++) {
		resolutions[z - 1] = size / Math.pow(2, z - 1);
		matrixIds[z - 1] = (z - 1).toString();
	}

	const tileGrid = new ol.tilegrid.WMTS({
		origin,
		resolutions: resolutions,
		extent: projectionExtent,
		matrixIds: matrixIds
	});

	const url = `http://t0.tianditu.gov.cn/img_w/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;
	// const url = `http://`;

	const wmtsSource = new ol.source.WMTS({
		url,
		layer: 'img',
		matrixSet: 'w',
		format: 'tiles',
		projection: projection,
		tileGrid: tileGrid,
		style: 'default',
		wrapX: false
	});

	const poiUrl = `http://t0.tianditu.gov.cn/cia_w/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;
	const poiSource = new ol.source.WMTS({
		url: poiUrl,
		layer: 'cia',
		matrixSet: 'w',
		format: 'tiles',
		projection: projection,
		tileGrid: tileGrid,
		style: 'default',
		wrapX: false
	});

	const getResolutions = () => {
		const resolutions = [];
		let res = 156543.03392800014 * 2;
		for (let z = 1; z <= 19; z++) {
			res /= 2.0;
			resolutions[z - 1] = res;
		}
		return resolutions;
	};

	const mbtRes = getResolutions();

	console.log('mbtRes:', mbtRes);
	console.log('resolutions:', resolutions);

	let xyzUrl = 'http://192.168.109.48:10001/scgis/mbt?name=XJZ_DOM';  // 衡水
	// xyzUrl = 'https://121.36.242.84:10002/scgis/scgis/mbt?name=XJZ_DOM';  // 衡水
	// xyzUrl = 'http://192.168.108.48:9998/scgis/mbt?name=YL_DOM';  // 榆林
	xyzUrl = 'http://192.168.108.48:9998/scgis/mbt?name=XJZ_DOM';  // 榆林
	const xyzSource = new ol.source.XYZ({
		// url: 'http://192.168.109.48:10001/scgis/mbt?name=XJZ_DOM'
		tileUrlFunction: (tileCord) => {
			const z = tileCord[0];
			const x = tileCord[1];
			const y = -tileCord[2] - 1;
			return `${xyzUrl}&col=${x}&row=${y}&level=${z}`;
		},
		tileGrid: new window.ol.tilegrid.TileGrid({
			origin: [-2.0037508342787E7, -2.0037508342787E7],   // 衡水
			// resolutions: mbtRes,
			resolutions,
			extent: [12823682.657903764, 4564789.516348027, 12826266.077903764, 4566990.346348025], // 衡水
			tileSize: 256
		}),
	});

	// 图层
	const baseLayer = new ol.layer.Tile({
		source: wmtsSource
	});
	const poiLayer = new ol.layer.Tile({
		source: poiSource
	});

	const xyzLayer = new ol.layer.Tile({
		source: xyzSource,
		maxResolution: 9.55462853564454,
	});

	const circlePoint = ol.proj.transform([115.20642260278824, 37.90087352889144], 'EPSG:4326', 'EPSG:3857');    // 衡水
	// const circlePoint = ol.proj.transform([109.770364, 38.333917], 'EPSG:4326', 'EPSG:3857');    // 榆林
	console.log(circlePoint);
	const points = [
		[0, 0],
		[12955887.989156704, 4849958.044121415]
	];
	const centerPoint = circlePoint;

	const map = new ol.Map({
		layers: [
			baseLayer,
			poiLayer,
			xyzLayer
		],
		target: 'map',
		view: new ol.View({
			center: centerPoint,
			projection,
			zoom: 18,
			maxZoom: 23,
			minZoom: 1
			// resolutions
		})
	});
</script>
</html>
